<template>
  <router-view v-if="path == '/login'" />
   <el-container class="mian-container" v-else>
    <menus-view />
    <el-main>
      <el-header>
        <div class="header-box">
          <div class="breadcrumb"><breadcrumb /></div>
          <div class="user">
            <el-dropdown @command="handleCommand">
              <span>
                {{ commonStore.userName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="quit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <tags-view /> 
      </el-header>
      <el-main class="body" v-loading="commonStore.loading">    
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :key="route.name"  v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :is="Component" :key="route.name"  v-if="!$route.meta.keepAlive"/>
        </router-view>
      </el-main>
    </el-main>
   </el-container>
</template>
<script lang="ts" setup>
  import { ArrowDown } from '@element-plus/icons-vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ref, watch,computed } from 'vue'
  import { useCommonStore } from '@/stores/common'
  import { useMenusStore } from '@/stores/menus'
  import tagsView from '@/views/layout/TagsView.vue'
  import menusView from '@/views/layout/MenusView.vue'
  import breadcrumb from '@/views/layout/Breadcrumb.vue'

  import { storeToRefs } from "pinia"
  const commonStore  = useCommonStore()
  const menusStore  = useMenusStore()
  const route = useRoute()
  const path = ref<string>('') //当前目录
  const router = useRouter()
  const handleCommand = (command: string):void => {
   switch(command) {
    case 'quit': 
    commonStore.quit()
    router.push('/login')
    break
   }
  }
  watch(() => route.fullPath,(n, o) => {
    path.value = n
  })
  const key = computed(() => {
    return route.path
  })

</script>
<style lang="less">
.mian-container {
  height: 100vh;
  .el-main {
    padding:0px;
    --el-main-padding: 0px;
    .el-header {
      z-index: 99;
      position: sticky;
      background-color: #fff;
      top: 0;
      --el-header-padding: 0px;
        height: 105px;
        .header-box {
          height: 60px;
          line-height: 60px;
          padding:0 20px;
          border-bottom: 1px solid #f1f1f1;
          display: flex;
          justify-content: space-between;
          align-items:center;
          .el-dropdown {
            height: 60px;
          line-height: 60px;
          }
        }  
    }
    .body {
      margin: 16px;
      padding: 16px;
      background-color: #fff;
      min-height: calc(100vh - 141px);
    }
           
  }
}
</style>
